<template>
  <view>
    <view v-if="adConfig.wx_reward_signin">
      <view @click="limit_throttle">
        <image style="width: 100%; height: 100px;margin-left: 10px;margin-top: 10px"
               src="https://hddj2022.oss-cn-hangzhou.aliyuncs.com/0images/wxad1.png" mode="aspectFit"></image>
      </view>
      <!--			<view style="color: #FFFFFF;margin-top: 18rpx;">今天已观看{{list.length}}次广告(每天最多{{adConfig.ad_limit}}次)</view>-->

      <view class="bannerads">
        <u-line-progress :percent="jindu" activeColor="#9370DB"></u-line-progress>
        <view style="height: 20rpx;"></view>
      </view>

      <view v-if="list.length>0" class="jilu" v-for="(item,index) in list" :key="index">
        <view>看广告获得{{item.change_num||0}}金豆</view>
        <view>记录时间：{{$u.timeFormat(item._add_time, 'yyyy/mm/dd hh:MM:ss')}}</view>
      </view>
      <view v-if="list.length==0" class="jilu">
        <view>今天还没有领取过广告奖励哦</view>
        <view>点击页面上方【观看广告】即可开始</view>
      </view>
    </view>

    <view v-else>
      <u-empty mode="page" icon="http://cdn.uviewui.com/uview/empty/page.png" text="活动尚未开启">
      </u-empty>
    </view>


  </view>
</template>


<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
import {toast} from "../../utils/utils";
import {adTodayList} from "../../api/api";
let rewardedVideoAd = null;

export default {
  components: {UGap},
  mixins: [common_mixin],
  data() {
    return {
      //底部线条区
      status: 'loadmore',
      loadingText: '努力加载中',
      loadmoreText: '查看规则',
      nomoreText: '实在没有了',


      list: [],
      jindu: 10,
    }
  },
  onLoad() {
    if (!this.vuex_user.id) {
      uni.switchTab({
        url: "/pages/Tabbar/my/my"
      })
      return;
    }
    this.loadRewardedAd()
  },
  onShow() {
    this.getList()
  },
  methods: {
    async getList() {
      console.log(this.adConfig)
      let adLimit = this.adConfig.wx_reward_signin.ad_limit
      let adId = this.adConfig.wx_reward_signin.ad_id
      let data = await this.$api.adTodayList({ad_id:adId})
      this.list = data;
      this.jindu = this.toDecimal(this.list.length / adLimit  * 100,0);
    },
    // Decimal 转换函数
    toDecimal(value, decimalPlaces) {
      let factor = Math.pow(10, decimalPlaces);
      return Math.round(value * factor) / factor;
    },
    limit_throttle() {
      this.showRewardedVideoAd()
    },
    //加载激励广告
    loadRewardedAd() {
      let that = this
      let config =this.adConfig.wx_reward_signin;
      if (wx.createRewardedVideoAd && config) {
        rewardedVideoAd = wx.createRewardedVideoAd({
          adUnitId: config.provider_ad_id
        })
        rewardedVideoAd.onLoad(() => {
          console.log('激励广告加载成功')
        })
        rewardedVideoAd.onError((err) => {
          console.log('激励广告加载失败', err)
        })
        rewardedVideoAd.onClose((res) => {
          // 用户点击了【关闭广告】按钮
          if (res && res.isEnded) {
            console.log("播放结束，可发放奖励");
            that.look_ads_end()
          } else {
            that.look_ads_end()
            console.log("中途结束");
          }
        })
      }
    },
    // 显示激励视频
    async showRewardedVideoAd () {
      console.log("开始激励视频")
      let config =this.adConfig.wx_reward_signin;
      console.log(config)
      if (!config) {
        return ;
      }
      let data = await this.$api.adTimesLimit({ad_id: config.ad_id})
      if (data.errorCode) {
        console.log("错误：",data.errorMsg)
        toast(data.errorMsg)
        return;
      }
      if (rewardedVideoAd) {
        console.log("开始加载激励视频和显示")
        rewardedVideoAd.load()
          .then(() => {
            rewardedVideoAd.show().catch(() => {
              // 失败重试
              rewardedVideoAd.load()
                .then(() => rewardedVideoAd.show())
                .catch(err => {
                  console.log('激励视频 广告显示失败',err)
                })
            })
          })
          .catch(err => {
            console.log('激励视频 广告拉取失败', err)
          })
      }
    },
    //观看广告完成，获取奖励
    async look_ads_end() {
      let config =this.adConfig.wx_reward_signin;
      await this.$api.adJiangLi({ad_id: config.ad_id})
      toast('奖励已发放!');
      this.getList()
    },

  }
}
</script>

<style>
.bannerads {
  margin: 8px 4px;
  width: 98%;
}

page {
  background-color: #ffffff;
}



.jilu {
  background-color: #E6E6FA;
  color: #000000;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}
</style>
